<template>
  <div id="market_gameticket_times_edit">
    <Row type='flex' justify="center" class='Row_content'>
      <Col>
          <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
            <FormItem label="局数" prop="price">
              <Input v-model="formValidate.price" placeholder="请输入" class='input-wid' :maxlength="6" @on-keyup='filterSpace' @on-blur="filterSpace"></Input>
            </FormItem>
            <FormItem label="备注" prop="remark">
              <Input v-model="formValidate.remark" placeholder="请输入" type="textarea" :autosize="{minRows: 4,maxRows: 8}" :maxlength="100"></Input>
              <span class="rol_tipsd">
                {{ formValidate.remark.length }}/100
              </span>
            </FormItem>
            <FormItem class="form-btn"
                    style="margin-top: 5px;">
            <Button type="primary"
                    class="system-submit-btn"
                    @click="handleSubmit"
                    >确定</Button>
            <Button class="system-submit-btn"
                    @click="handleReset"
                    style="margin-left: 8px">取消</Button>
          </FormItem>
          </Form>
      </Col>
    </Row>
  </div>
</template>

<script>
import { routeEqual } from '@/libs/util'
import { mapState } from 'vuex'
import { savePrice, getDetail } from '@/api/market/game-ticket-old/priceTimes.js'
export default {
  name: 'market_gameticket_times_edit',
  data () {
    return {
      id: '',
      formValidate: {
        price: '',
        remark: ''
      },
      ruleValidate: {
        price: { required: true, message: '请填写局数', trigger: 'blur' }
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (vm.id !== to.query.id) {
        vm.id = to.query.id
        vm.getDetail()
      }
    })
  },
  mounted () {
    this.id = this.id = this.$route.query.id
    this.getDetail()
  },
  computed: {
    ...mapState({
      merchantId: state => state.user.merchantId,
      userId: state => state.user.userId,
      userName: state => state.user.userName
    })
  },
  methods: {
    filterSpace () {
      this.formValidate.price = this.formValidate.price.replace(/\D/g, '')
      if (this.formValidate.price !== '' && this.formValidate.price.substring(0, 1) === '0') {
        this.formValidate.price = this.formValidate.price.substring(1, this.formValidate.price.length)
      }
    },
    getDetail () {
      if (this.id) {
        getDetail({
          id: this.id
        }).then(res => {
          const result = res.data || {}
          if (result.status === 200) {
            const form = result.data || {}
            this.formValidate = {
              price: form.configValue,
              remark: form.remark || ''
            }
          } else {
            this.$Message.error(`${result.error}`)
          }
        }).catch(err => {
          this.$Message.error(`${err}`)
        })
      }
    },
    handleSubmit () {
      this.$refs.formValidate.validate(val => {
        if (val) {
          const formValidate = this.formValidate
          const params = {
            merchantId: this.merchantId,
            configType: '2',
            configValue: formValidate.price,
            operator: this.userName,
            operatorId: this.userId,
            remark: formValidate.remark
          }
          if (this.id) {
            params.id = this.id
          }
          savePrice(params).then(res => {
            const result = res.data || {}
            if (result.status === 200) {
              this.$Message.success(this.id ? '编辑成功！' : '新增成功！')
              this.handleReset()
            } else {
              this.$Message.error(`${result.error}`)
            }
          }).catch(err => {
            this.$Message.error(`${err}`)
          })
        }
      })
    },
    handleReset () {
      this.$store.commit('closeTag', this.$route)
      this.$store.commit('setTagNavList', this.$store.state.app.tagNavList.filter(item => !routeEqual(this.$route, item)))
      this.$nextTick(() => {
        this.$router.push({
          name: 'market_gameticket_times'
        })
      })
    }
  }
}
</script>

<style lang='less'>
  #market_gameticket_times_edit{
    .input-wid{
      width: 280px;
    }
  }
</style>
